<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="">
        <el-input v-model="queryParams.menuName" @keyup.enter.native="handleQuery" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="" style="width: 90px">
        <el-select v-model="queryParams.visible" placeholder="状态">
          <el-option
            v-for="item in visibleOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery('1')">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery('reset')">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="menuList"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="menuName" label="菜单名称" min-width="120px" />
      <el-table-column prop="icon" label="图标" min-width="60px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" min-width="60px" />
      <el-table-column prop="perms" label="权限" min-width="120px" />
      <el-table-column prop="component" label="组件路径" min-width="100px" />
      <el-table-column prop="visible" label="可见" :formatter="visibleFormat" min-width="50px" />
      <el-table-column prop="createTime" label="创建日期" min-width="120px" />
      <el-table-column label="操作" min-width="120px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-plus" @click="handleAdd(scope.row)">添加</el-button>
          <el-button type="text" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-popover :ref="scope.row.id" placement="top" width="150" style="margin-left:10px">
            <p>确定要删除菜单【{{ scope.row.menuName }}】吗？</p>
            <div>
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="handleDelete(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini" icon="el-icon-delete">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改的对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
      <el-form ref="edit" :model="form" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="请选择上级菜单" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型">
              <el-radio-group v-model="form.menuType">
                <el-radio label="C">目录</el-radio>
                <el-radio label="M">菜单</el-radio>
                <el-radio label="B">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType!=='B'" :span="24">
            <el-form-item label="菜单图标">
              <el-popover trigger="click" width="400" placement="bottom-start" @show="$refs['iconSelect'].reset()">
                <icon-select ref="iconSelect" @selectIcon="selectIcon" />
                <el-input slot="reference" v-model="form.icon">
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称">
              <el-input v-model="form.menuName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示顺序">
              <el-input-number v-model="form.orderNum" :min="1" :max="100" />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType!=='B'" :span="12">
            <el-form-item label="路由地址">
              <el-input v-model="form.path" />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType!=='B'" :span="12">
            <el-form-item label="组件地址">
              <el-input v-model="form.component" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标示">
              <el-input v-model="form.perms" />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType!=='B'" :span="24">
            <el-form-item label="是否显示">
              <el-radio-group v-model="form.visible">
                <el-radio
                  v-for="dict in visibleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMenu, getMenu, addMenu, updateMenu, delMenu } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'

export default {
  components: {
    Treeselect,
    IconSelect
  },
  data() {
    return {
      queryParams: {
        menuName: undefined,
        visible: undefined
      },
      menuList: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      title: '',
      form: { },
      menuOptions: [],
      visibleOptions: []
    }
  },
  mounted() {
    this.getMenuList()
    this.getDict('show_hide').then(res => {
      this.visibleOptions = res.data
    })
  },
  methods: {
    getMenuList() {
      this.loading = true
      listMenu(this.queryParams)
        .then(res => {
          this.menuList = this.handleTree(res.data)
          this.loading = false
        })
    },
    handleQuery(page) {
      if (page === 'reset') {
        this.queryParams = null
        this.getMenuList()
      } else {
        this.getMenuList()
      }
    },
    visibleFormat(row, column) {
      return this.selectDictLabel(this.visibleOptions, row.visible)
    },
    handleAdd(row) {
      this.reset()
      this.dialogVisible = true
      this.title = '添加菜单'
      this.getTreeSelect()
      if (row !== null) {
        this.form.parentId = row.id
      }
    },
    // edit表单重置
    reset() {
      this.resetForm('edit')
      this.form = {
        parentId: '0',
        menuType: 'C',
        orderNum: '1',
        visible: '1',
        icon: undefined
      }
    },
    // 修改菜单
    handleUpdate(row) {
      this.reset()
      this.getTreeSelect()
      this.form = row
      this.dialogVisible = true
      this.title = '修改菜单'
    },
    getTreeSelect() {
      listMenu().then(res => {
        this.menuOptions = []
        const menu = { id: '0', menuName: '主目录', children: [] }
        menu.children = this.handleTree(res.data)
        this.menuOptions.push(menu)
        console.log(this.menuOptions)
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.children
      }
    },
    handleDelete(row) {
      delMenu(row.id).then(() => {
        this.getMenuList()
        this.msgSuccess('删除成功')
        this.$refs[row.id].doClose()
      })
    },
    submitForm() {
      this.$refs['edit'].validate(valid => {
        if (valid) {
          if (this.form.id === undefined) {
            addMenu(this.form).then(res => {
              this.msgSuccess('添加成功')
              this.dialogVisible = false
              this.getMenuList()
            })
          } else {
            updateMenu(this.form).then(res => {
              this.msgSuccess('修改成功')
              this.dialogVisible = false
              this.getMenuList()
            })
          }
        }
      })
    },
    cancel() {
      this.dialogVisible = false
    },
    selectIcon(name) {
      console.log(this.form.icon)
      this.form.icon = name
      console.log(this.form.icon)
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
